<template>
  <div class="table-demo">
    <h2>表格案例展示</h2>

    <div class="demo-section">
      <h3>基础表格</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="demo-section">
      <h3>可编辑表格</h3>
      <el-table :data="editableTableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
          <template #default="scope">
            <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.date"
              size="small"
            />
            <span v-else>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <template #default="scope">
            <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.name"
              size="small"
            />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <template #default="scope">
            <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.address"
              size="small"
            />
            <span v-else>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
              v-if="scope.row.isEdit"
              type="success"
              size="small"
              @click="saveRow(scope.row)"
            >保存</el-button>
            <el-button
              v-if="scope.row.isEdit"
              size="small"
              @click="cancelEdit(scope.row)"
            >取消</el-button>
            <el-button
              v-else
              size="small"
              @click="editRow(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

interface TableItem {
  date: string
  name: string
  address: string
}

interface EditableTableItem extends TableItem {
  isEdit?: boolean
  _originalData?: TableItem
}

const tableData = ref<TableItem[]>([
  {
    date: '2023-05-01',
    name: '张三',
    address: '北京市朝阳区'
  },
  {
    date: '2023-05-02',
    name: '李四',
    address: '上海市浦东新区'
  },
  {
    date: '2023-05-03',
    name: '王五',
    address: '广州市天河区'
  }
])

const editableTableData = ref<EditableTableItem[]>([
  {
    date: '2023-06-01',
    name: '赵六',
    address: '深圳市南山区'
  },
  {
    date: '2023-06-02',
    name: '钱七',
    address: '杭州市西湖区'
  },
  {
    date: '2023-06-03',
    name: '孙八',
    address: '成都市武侯区'
  }
])

const handleEdit = (row: TableItem) => {
  ElMessage.success(`编辑行：${row.name}`)
}

const handleDelete = (row: TableItem) => {
  ElMessage.success(`删除行：${row.name}`)
}

const editRow = (row: EditableTableItem) => {
  row._originalData = { ...row }
  row.isEdit = true
}

const saveRow = (row: EditableTableItem) => {
  row.isEdit = false
  delete row._originalData
  ElMessage.success('保存成功')
}

const cancelEdit = (row: EditableTableItem) => {
  if (row._originalData) {
    Object.assign(row, row._originalData)
  }
  row.isEdit = false
  delete row._originalData
}
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.el-button {
  margin-right: 10px;
}

.el-button:last-child {
  margin-right: 0;
}
</style>